<template>
	<view>
		<!-- 插值 -->
		<view class="text-area">
			<text>{{title}}</text>
		</view>

		<!-- v-if -->
		<view v-if="!rainning">今天天气真好</view>
		<view v-if="rainning">下雨天</view>
		<view v-if="state ==='vue'">state的值是Vue</view>
		<view> State is {{ state?'vue':'App'}}</view>

		<view>
			<view v-if="state==='vue'">uni-app</view>
			<view v-else-if="state ==='html'"> HTML</view>
			<view v-else>HTML</view>
		</view>
		<!-- v-for -->
		<view class="content">

			<view v-for="item in arr" style="color: #ff0000; margin-bottom: 5px;">
				{{ item }}
			</view>


			<view v-for="(item, index) in 4" style="color: #00ff00; margin-bottom: 5px;">
				<view :class="'list-' + index % 2">下标：{{ index % 2 }}</view>
			</view>


			<view v-for="(value, name, index) in object" style="margin-bottom: 5px;">
				{{ index }}. {{ name }}: {{ value }}
			</view>


			<view v-for="item in arr" :key="item.id" style="color: #0000ff; margin-bottom: 5px;">
				{{ item.id }}: {{ item.name }}
			</view>
		</view>
		<!-- @点击 -->
		<view  :style="{ 
      backgroundColor: currentColor, 
      width: currentSize, 
      height: currentSize 
    }" @click="toColor">

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello uni-app',
				arr: [{
						id: 1,
						name: 'uni-app'
					},
					{
						id: 2,
						name: 'HTML'
					}
				],

				object: {
					title: 'How to do lists in Vue',
					author: 'Jane Doe',
					publishedAt: '2020-04-10'
				},
				currentColor: 'red',
				currentSize: '100rpx',
				colorList: ['red', 'blue', 'green'],
				sizeList: ['100px', '150px', '200px']
			}
		},
		methods: {
			toColor() {
				const currentIndex = this.colorList.indexOf(this.currentColor);
				const sizeIndex = this.sizeList.indexOf(this.currentSize);
				const nextIndex = (currentIndex + 1) % this.colorList.length;
				this.currentColor = this.colorList[nextIndex];
				this.currentSize = this.sizeList[nextIndex];

			}
		}
	}
</script>

<style>
	.text-area {
		color: #bebebe;
	}

	
</style>